<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>圣杯布局</title>
		<style>
		*{margin: 0;padding: 0;}
			.container{
				height: 300px;
				padding: 0 200px;
				min-width: 200px;
			}
			.colum{
				height: 300px;
				float: left;
				position: relative;
			}
			.main{
				width: 100%;
				background-color: pink;
				word-break: break-all;/*自动换行*/
			}
			.left{
				width: 200px;
				background-color: purple;
				margin-left: -100%;
				left: -200px;
			}
			.right{
				width: 200px;
				background-color: blue;
				margin-left: -200px;
				right: -200px;
			}
			.logo{
				width: 68px;
				height: 68px;
				
			}
			.logo h1 a{
				display: block;
				width: 100%;
				height: 68px;
			 	background: url(img/logo.png) no-repeat;
			 	text-indent: -20000em;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="colum main">my name is freddy my name is freddy my name is freddy my name is freddy my name is freddy my name is freddy my name is freddy my name is freddy my name is freddy my name is freddy my name is freddy</div>
			<div class="colum left">
				<div class="logo">
					<h1>
						<a href="https://www.baidu.com/" title="logo优化方法">logo优化的方法</a>
					</h1>
				</div>
			</div>
			<div class="colum right"></div>
		</div>
	</body>
</html>
